<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <script>
        if(!location.hash.replace('#', '').length) {
            location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
            location.reload();
        }
    </script>

    <title>RTCMultiConnection-v1.3.js testing demo! | Muaz Khan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script>
    var hash = window.location.hash.replace('#', '');
    if (!hash.length) {
        location.href = location.href + '#' + ((Math.random() * new Date().getTime()).toString(36).toUpperCase().replace(/\./g, '-'));
        location.reload();
    }
    </script>
    <script src="https://cdn.webrtc-experiment.com/socket.io.js"></script>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="https://cdn.webrtc-experiment.com/CodecsHandler.js"></script>
    <script src="https://cdn.webrtc-experiment.com/IceServersHandler.js"></script>
    <script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
</head>

<body>
    <button id="new-session">Open New Session</button>
    <input type="checkbox" id="audio-renegotiation" checked>
    <label for="audio-renegotiation">Renegotiate Audio</label>
    <input type="checkbox" id="video-renegotiation" checked>
    <label for="video-renegotiation">Renegotiate Video</label>
    <input type="checkbox" id="screen-renegotiation">
    <label for="screen-renegotiation">Renegotiate Screen</label>
    <input type="checkbox" id="one-way">
    <label for="one-way">Is One Way?</label> <a href="https://www.webrtc-experiment.com/">Goto "WebRTC Experiments & Demos" Homepage</a>

    <div id="local-video-container" class="local-video-container"></div>
    <div id="remote-videos-container" class="remote-videos-container"></div>
    <h2>How it works?</h2>

    <p>Renegotiation means using pre-created peer connections to add additional streams by renegotiating offer/answer session descriptions.</p>
    <p>In this demo; at first time; only data connection is opened. Later on, same peer connections are used to renegotiate audio, video or screen streams.</p>
    <p>It is runtime insertion of streams!</p>
    <br />
    <br />
    <p>Remeber, it is a testing demo for <a href="http://www.RTCMultiConnection.org/">RTCMultiConnection.js</a> library. Documentation <a href="https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.3.md" target="_blank">available here</a>.</p>
    <!--
            begins -->
    <script>
    var connection = new RTCMultiConnection(hash);

    // https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
    var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
    connection.openSignalingChannel = function(config) {
        var channel = config.channel || connection.channel || 'default-namespace';
        var sender = Math.round(Math.random() * 9999999999) + 9999999999;

        io.connect(SIGNALING_SERVER).emit('new-channel', {
            channel: channel,
            sender: sender
        });

        var socket = io.connect(SIGNALING_SERVER + channel);
        socket.channel = channel;

        socket.on('connect', function() {
            if (config.callback) config.callback(socket);
        });

        socket.send = function(message) {
            socket.emit('message', {
                sender: sender,
                data: message
            });
        };

        socket.on('message', config.onmessage);
    };

    connection.session = {
        data: true
    };
    </script>
    <!-- data events -->
    <script>
    connection.onopen = function(e) {
        inputMessage.disabled = false;
        connection.send('Hi, I\'m ' + e.userid);

        // only session initiator can add streams for renegotiation
        if (connection.isInitiator)
            connection.addStream({
                audio: !!document.getElementById('audio-renegotiation').checked,
                video: !!document.getElementById('video-renegotiation').checked,
                screen: !!document.getElementById('screen-renegotiation').checked,
                oneway: !!document.getElementById('one-way').checked
            });
    };

    connection.onmessage = function(e) {
        appendDIV(e.data);
    };
    </script>
    <!-- streams events -->
    <script>
    var remoteVideosContainer = document.getElementById('remote-videos-container');
    connection.onstream = function(e) {
        video = getVideo(e);
        if (e.type === 'local') document.getElementById('local-video-container').appendChild(video);
        if (e.type === 'remote') remoteVideosContainer.appendChild(video, remoteVideosContainer.firstChild);
    };
    </script>
    <!-- initialization -->
    <script>
    connection.connect();

    document.getElementById('new-session').onclick = function() {
        connection.open();
        this.disabled = true;
    };
    </script>
    <script>
    function getVideo(e) {
        div = document.createElement('div');
        div.className = 'video-container';
        div.id = e.userid || 'You';

        button = document.createElement('button');
        button.innerHTML = 'Mute';
        button.id = e.streamid;
        button.onclick = function() {
            button = this;
            button.disabled = true;
            streamid = button.id;

            if (button.innerHTML == 'Mute') {
                connection.streams[streamid].mute();
                button.innerHTML = 'UnMute';
            } else {
                connection.streams[streamid].unmute();
                button.innerHTML = 'Mute';
            }

            setTimeout(function() {
                button.disabled = false;
            }, 200);
        };
        div.appendChild(button);

        div.appendChild(e.mediaElement);

        h2 = document.createElement('h2');
        h2.innerHTML = e.userid || 'You';
        div.appendChild(h2);
        return div;
    }
    </script>
    <script>
    connection.onleave = function(e) {
        var video = document.getElementById(e.userid);
        if (video) video.parentNode.removeChild(video);
    };
    </script>
    <style>
    * {
        -webkit-user-select: none;
        font-family: 'Segoe UI Light';
    }
    
    html {
        overflow: hidden;
    }
    
    .local-video-container {
        background: rgb(253, 104, 104);
        border: 2px solid red;
        border-bottom-left-radius: 5%;
        border-bottom-right-radius: 5%;
        float: left;
        overflow: hidden;
        text-align: center;
        width: 40%;
    }
    
    video {
        width: 100%;
    }
    
    .remote-videos-container {
        background: rgb(104, 170, 253);
        border: 2px solid rgb(5, 129, 160);
        border-bottom-left-radius: 5%;
        border-bottom-right-radius: 5%;
        float: left;
        overflow: hidden;
        text-align: center;
        width: 58%;
    }
    
    .video-container {
        background: white;
        display: inline-block overflow: hidden;
        vertical-align: top;
    }
    
    .video-container h2 {
        border: 0;
        border-top: 1px solid black;
        display: block;
        margin: 0;
        text-align: center;
    }
    
    .video-container button {
        margin: .2em;
        position: absolute;
        z-index: 200;
    }
    
    button {
        -moz-border-radius: 3px;
        -moz-transition: none;
        -webkit-transition: none;
        background: #0370ea;
        background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
        background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
        border: 1px solid #076bd2;
        border-radius: 3px;
        color: #fff;
        display: inline-block;
        font-family: inherit;
        font-size: 1.3em;
        line-height: 1.3;
        padding: 5px 12px;
        text-align: center;
        text-shadow: 1px 1px 1px #076bd2;
    }
    
    button:hover {
        background: rgb(9, 147, 240);
    }
    
    button:active {
        background: rgb(10, 118, 190);
    }
    
    button[disabled] {
        background: none;
        border: 1px solid rgb(187, 181, 181);
        color: gray;
        text-shadow: none;
    }
    
    footer {
        background: white;
        border-top: 2px solid black;
        bottom: 0;
        left: 0;
        max-height: 200px;
        overflow-x: hidden;
        overflow-y: scroll;
        position: absolute;
        right: 0;
    }
    
    input[type=text] {
        -webkit-user-select: initial;
        font-size: 1.4em;
        width: 100%;
    }
    
    #messages div {
        border-bottom: 1px solid black;
        font-size: 1.4em;
        padding: .4em .8em;
    }
    </style>
    <footer>
        <div id="messages"></div>
        <input type="text" id="input-message" disabled>
    </footer>
    <script>
    var messages = document.getElementById('messages');
    var inputMessage = document.getElementById('input-message');

    inputMessage.onkeypress = function(e) {
        if (e.keyCode != 13) return;
        appendDIV(this.value);
        connection.send(this.value);
        this.value = '';
    };

    function appendDIV(message) {
        div = document.createElement('div');
        div.innerHTML = message;
        messages.appendChild(div);

        inputMessage.focus();
    }
    </script>
</body>

</html>